<template>
 <div id="particles-js">
<div class="login-form" style="margin-top: 270px; text-align: center;margin-left: 400px;">
   <h2>登录</h2>
 <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="ruleForm"
    :rules="rules"
    label-width="auto"
    class="demo-ruleForm"
    :size="formSize"
    status-icon
  >
    <el-form-item label="用户名" prop="userName">
      <el-input v-model="ruleForm.userName" style="width: 200px" />
    </el-form-item>
    <el-form-item label="密 码" prop="userPwd">
      <el-input v-model="ruleForm.userPwd" style="width: 200px" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">
        登录
      </el-button>
      <el-button @click="resetForm(ruleFormRef)">重置</el-button>
    </el-form-item>
  </el-form>
</div>
 </div>


</template>

<script lang="ts" setup>
import { reactive, ref,onMounted,onBeforeUnmount   } from 'vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import axios from 'axios'
import { ElMessage } from 'element-plus'


// 定义表单数据类型
interface RuleForm {
  userName: string
  userPwd: string
 
}



// 定义表单大小
const formSize = ref<ComponentSize>('default')
// 定义表单实例
const ruleFormRef = ref<FormInstance>()
// 定义表单数据
const ruleForm = reactive<RuleForm>({
  userName: '',
  userPwd: '',

})

// 定义位置选项
const locationOptions = ['Home', 'Company', 'School']

// 定义表单验证规则
const rules = reactive<FormRules<RuleForm>>({
  userName: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
  ],
userPwd: [
    { required: true, message: '请输入密码', trigger: 'blur' },
  ],
})

// 提交表单
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
     axios.post("http://localhost:5058/api/Logins/GetLogin",rules).then(res=>{
        if(res.data.isSuc){
            ElMessage.success('登录成功')
        }else{
            ElMessage.error(res.data.msg)
        }
     })
    } else {
      console.log('error submit!', fields)
    }
  })
}

// 重置表单
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

// 定义选项
const options = Array.from({ length: 10000 }).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
}))
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80vh;
  background-size: cover;
  position: relative; /* Ensure positioning context for children */
}

.login-form {
   background: rgba(255, 255, 255, 0.9); /* 透明白色背景 */
  padding: 40px;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  max-width: 400px; /* 选定登录表单的最大宽度，确保更容易居中 */
  width: 100%; /* 使其宽度最大化 */
  overflow: hidden;
}

.login-form h2 {
  margin-bottom: 30px;
  text-align: center;
}

.el-form-item {
  margin-bottom: 20px; /* 增加表单项之间的间距 */
}

/* 按钮容器样式 */
.button-container {
  display: flex; /* 设置为 flex 布局 */
  justify-content: space-between; /* 按钮之间的间隔 */
}

/* 自定义按钮样式 */
.el-button {
  max-width: 100px; /* 设置按钮最大宽度 */
  flex: 1; /* 让按钮占满可用空间 */
  margin: 0 5px; /* 按钮之间的间隔 */
  padding: 10px; /* 调整内边距 */
  font-size: 14px; /* 调整字体大小 */
  border-radius: 5px; /* 圆角 */
  cursor: pointer; /* 鼠标悬停样式 */
  transition: background-color 0.3s, transform 0.2s; /* 动画效果 */
}

.el-button.primary {
  background-color: #007bff; /* 使用蓝色 */
  color: white; /* 字体颜色为白色 */
}

.el-button.primary:hover {
  background-color: #0056b3; /* 悬停时的颜色 */
  transform: translateY(-2px); /* 悬停时浮动效果 */
}

.el-button.reset-button {
  background-color: #ffc107; /* 使用亮黄色 */
  color: white; /* 字体颜色为白色 */
}

.el-button.reset-button:hover {
  background-color: #e0a800; /* 悬停时的颜色 */
  transform: translateY(-2px); /* 悬停时浮动效果 */
}
.cool-background {
  background: linear-gradient(135deg, #1e3c72, #2a5298);
  height: 100vh;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}
#particles-js {
    width: 100%;
    height: 100vh;
    position: relative;
}
</style>
